//生成html文件并作为浏览器根页面
const {
  readdirSync,
  copyFileSync,
  writeFileSync
} = require('fs');
const {
  title,
  innerDirPath: {
    htmlDir
  },
  outerPath: {
    htmlPath,
    rootPath
  },
  regexp: {
    reg_titleContent,
    reg_ulContent,
    reg_headerTitleContent,
    reg_iframeContent
  }
} = require('../config');
const {
  readFile,
  createMenuItem,
  replaceHtml,
  createIframe
} = require('../libs/utils');

/**
 * 创建index.html到根目录
 * @param {*} options 用户配置
 * @param {*} outerFilename 当监听到/src/html目录下某个文件修改时的文件名称 如welcome.html
 * @returns void
 */
function createIndexHtml(options, outerFilename) {
  //1.读取src > html目录下的文件
  const _htmlFiles = readdirSync(htmlPath);

  // console.log(_htmlFiles);
  //[ 'welcome.html', 'koa&koa2&SSR.html' ]

  //scr > html目录下没有文件时
  if (_htmlFiles.length === 0) {
    //拷贝_temp_files > html目录下的index.html到项目根目录下 作为浏览器默认加载页面
    copyFileSync(htmlDir + '/index.html', rootPath + '/index.html', 0, function (err) {
      if (err) {
        throw new Error('File is failed to copy.', err);
      }
    });

    //中止执行
    return;
  }

  //2.读取源文件中的temp_files>html>index.html 字符串
  //传入路径 temp_files>html>index.html
  const _indexHtmlStr = readFile(htmlDir + '/index.html');

  /**
   * console.log(_indexHtmlStr);
   * 打印了temp_files>html>index.html文件 并以字符串的形式打印出来
   * <!DOCTYPE html>
    <html lang="zh-CN">

    <head>
      <meta charset="UTF-8">
      <title>
        <!--doc title-->
      </title>
      <link rel="stylesheet" href="./src/css/index.css" />
    </head>

    <body>
      <div class="container">
        <header class="header">
          <h1 class="header-title">
            <!--doc title-->
          </h1>
        </header>
        <nav class="side-bar">
          <ul class="menu-list">
            <!--menu list-->
          </ul>
        </nav>
        <div class="iframe-page">
          <!--iframe page-->
        </div>
      </div>

      <script src="./src/js/index.js"></script>
    </body>

    </html>
   */

  //3.生成菜单模板
  let menuListStr = '';
  let newHtml = '';
  //如果outerFilename存在 索引就为找到的那一项索引
  //如果outerFilename不存在 默认为0
  let curIdx = outerFilename ? [].indexOf.call(_htmlFiles, outerFilename) : 0;

  //遍历包含文件名称的数组 生成<li>
  _htmlFiles.forEach((filename, index) => {

    //创建菜单项模板<li></li>
    menuListStr += createMenuItem(filename, options.domain, options.port, index === curIdx ? true : false);
  });

  /**
   console.log(menuListStr);
   * <li class="menu-item active">
      <a href="http://localhost:3000/src/html/welcome.html" target="myFrame">welcome</a>    
    </li>
   */

  //4.拼接字符串 
  //将<li>放入<ul class="menu-list"></ul>
  newHtml = replaceHtml(reg_ulContent, _indexHtmlStr, menuListStr);
  //将用户定义的标题字符串放入<title></title>
  newHtml = replaceHtml(reg_titleContent, newHtml, options.title || title);
  //将用户定义的标题字符串放入<h1 class="header-title"></h1>
  newHtml = replaceHtml(reg_headerTitleContent, newHtml, options.title || title);

  //将<iframe>标签放入<div class="iframe-page"></div>
  // console.log(_htmlFiles[0]); //welcome.html
  newHtml = replaceHtml(reg_iframeContent, newHtml, createIframe(_htmlFiles[curIdx], options.domain, options.port));

  //打印的是整个替换标注注释位置为<li>标签后html字符串

  //5.把新的html字符串内容写入文件到根目录下
  /**
   * 写入文件
   * writeFileSync()
   * @params1 path 创建一个文件的路径及文件名
   * @params2 content 在这个文件中写入什么内容
   */
  writeFileSync(rootPath + '/' + 'index.html', newHtml, function (err) {
    if (err) {
      throw new Error('File is failed to write.', err);
    }
  });

}

module.exports = {
  createIndexHtml
}